import React, {Component, PropTypes } from 'react';

class Header extends Component{

    static propTypes = {
        // title: String
        title: PropTypes.string.isRequired 
    }

    constructor (props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }

    componentWillMount () {
    }

    componentDidMount () {
        this.timer = setInterval(() => {
            this.setState({
                date: new Date()
            })
        }, 1000) 
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render() {
        const {title} = this.props;
        return (
            <div>
                <h3>{title}</h3>
                <p>{this.state.date.toLocaleTimeString()}</p>
            </div>
        )
    }
    
}

export default class Clock extends Component {

    static defaultProps = {
        show: '显示',
        hide: '隐藏',
        content: '<h1>test dangerouslySetHtml</h1>'
    }

    constructor(props) {
        super(props);
        this.state = {
            isShow: true
        }
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log(nextProps, nextState)
    // }

    componentDidMount() {
        
    }   

    componentWillReceiveProps(nextProps) {
        debugger;
        console.log(nextProps);
    }

    handleClick() {
        this.setState({
            isShow: !this.state.isShow
        })
    }

    render() {
        const content = this.props.content
        return (
            <div>
                <div>
                    {content}
                </div>
                <div dangerouslySetInnerHTML={{__html: this.props.content}}></div>
                <div>
                    {this.state.isShow ? <Header title="当前时间" />  : null }    
                </div>
                <button onClick={this.handleClick.bind(this)}>
                    {this.state.isShow ? this.props.hide : this.props.show}
                </button>                
            </div>
        )
    }
}